<template>
	<div class="">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">ToList ({{todos.length}})</h3>
			</div>
			<div class="panel-body">
				<ul class="list-group">
					<li :class="{done:item.completed}" v-for="(item,index) in todos" class="list-group-item ">
						{{item.title}} {{item.completed }}
						<button :class="item.completed?'btn-danger':'btn-success'" class="btn pull-right btn-xs" @click="toggleState(index)">{{item.completed?'完成':'已完成'}}</button>
						<button class="btn btn-info btn-xs pull-right" @click="deleteItem(index)">删除</button>
					</li>
				</ul>
				<input type="text" class="form-control" v-model="newData.title" />
				<button @click="addNews(newData)" class="btn btn-success">添加</button>
			</div>
			<div class="panel-footer">

			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				newData: {},
				todos: [{
						id: 1,
						title: '去吃饭',
						completed: false
					},
					{
						id: 2,
						title: '趴桌子睡觉',
						completed: false
					},
					{
						id: 3,
						title: '做梦都回来',
						completed: false
					},
					{
						id: 4,
						title: '发现想多了',
						completed: false
					},
					{
						id: 5,
						title: '踏实练习',
						completed: false
					}

				]
			}
		},

		methods: {
			addNews(data) {
				this.todos.push(data);
				this.newData = {
					id: null,
					title: ''
				};
			},
			toggleState(index) {
				this.todos[index].completed = !this.todos[index].completed;
				console.log(index)
			},
			deleteItem(index) {
				this.todos.splice(index, 1)
			}
		},
		computed: {
			total() {
				return this.todos.length;
			}

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h1,
	h2 {
		font-weight: normal;
	}
	
	ul {
		list-style-type: none;
		padding: 0;
	}
	
	li {
		margin: 0 10px;
	}
	
	a {
		color: #42b983;
	}
</style>